<template>
  <div>
    <!-- 轮播图 -->
    <div style="height:100%">
      <div class="van-swipe">
        <van-swipe :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in list" :key="item.id" style="height:100%">
            <img :src="item.img" class="img" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>

    <!-- 首页九宫格 -->
    <van-grid :column-num="3" square>
      <van-grid-item
        v-for="item in gridImages"
        :key="item.id"
        :text="item.title"
        :icon="item.url"
        :to="item.path"
      />
    </van-grid>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      // 图片数据
      list: [],
      gridImages: [
        {
          id: "1",
          title: "新闻资讯",
          url: require("../assets/image/menu1.png"),
          path: "/news/list"
        },
        {
          id: "2",
          title: "图片分享",
          url: require("../assets/image/menu2.png"),
          path: "/sharing"
        },
        {
          id: "3",
          title: "商品购买",
          url: require("../assets/image/menu3.png"),
          path: "/goods/list"
        },
        {
          id: "4",
          title: "留言反馈",
          url: require("../assets/image/menu4.png"),
          path: "/feedback"
        },
        {
          id: "5",
          title: "视频专区",
          url: require("../assets/image/menu5.png"),
          path: "/video"
        },
        {
          id: "6",
          title: "联系我们",
          url: require("../assets/image/menu6.png"),
          path: "/map"
        }
      ]
    };
  },
  methods: {
    async getImageList() {
      const { data: res } = await this.$http.get("/api/getlunbo");
      console.log(res);
      if (res.status !== 0) {
        return this.$notify("获取首页图片数据失败");
      }
      this.list = res.message;
    }
  },
  created() {
    this.getImageList();
  }
};
</script>
<style lang="less" scoped>
.van-swipe {
  height: 200px;
  background: #eee;
}

.van-swipe img {
  object-fit: cover;
  width: 100%;
  height: 200px;
}
</style>
